@media screen and (min-width: 350px) {
  html {
    font-size: 35px;
  }
}
@media screen and (min-width: 450px) {
  html {
    font-size: 45px;
  }
}
body {
  background-color: lightblue;
}
div {
  width: 300px;
  height: 200px;
  background-color: lightblue;
}
.main {
  width: 300px;
  height: 200px;
  background-color: red;
}
.main:hover {
  background-color: orange;
}
.main::after {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background-color: violet;
}
.main.primary {
  color: orange;
}
.main .father {
  width: 80%;
  height: 200px;
  background-color: blue;
}
.main .father .son {
  width: 50%;
  height: 100px;
  background-color: green;
}
.primary {
  width: 160px;
  height: 100px / 2;
}
#app {
  width: 10rem;
  margin: auto;
}
.header {
  padding: 0 0.266667rem;
  background-color: #FFDB47;
}
.header .header__upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .header__upper .header__classify {
  width: 200px;
}
